<template>
  <wd-calendar
    :use-default-slot="true"
    type="daterange"
    v-model="_date"
    @confirm="handleConfirm"
    allow-same-day
    :with-cell="false"
    :min-date="minDate"
    :max-date="new Date().getTime()"
  >
    <view class="date-wrap">
      <view class="date-range">
        <view class="date-range-item">
          <text v-if="formatDate?.[0]">{{ formatDate[0] }}</text>
          <text v-else>开始日期</text>
        </view>
        <view><wd-icon name="swap-right" size="18px"></wd-icon></view>
        <view class="date-range-item">
          <text v-if="formatDate?.[1]">{{ formatDate[1] }}</text>
          <text v-else>结束日期</text>
        </view>
      </view>
      <view class="date-icon">
        <!-- <wd-icon name="calendar" size="30px"></wd-icon> -->
        <image class="icon" src="@/static/icons/calendar.png" />
      </view>
    </view>
  </wd-calendar>
</template>

<script setup>
import dayjs from 'dayjs'

const props = defineProps({
  date: {
    required: true,
  },
  minDate: {
    default: () => {
      return new Date(dayjs().subtract(2, 'year')).getTime()
    },
  },
})

const emits = defineEmits(['update:date', 'confirm'])

const _date = computed({
  get() {
    return props.date
  },
  set(val) {
    emits('update:date', val)
  },
})

const formatDate = computed(() => {
  let arr = []
  if (Array.isArray(_date.value)) {
    if (_date.value[0]) {
      arr[0] = dayjs(_date.value[0]).format('YYYY/MM/DD')
    }
    if (_date.value[1]) {
      arr[1] = dayjs(_date.value[1]).format('YYYY/MM/DD')
    }
  } else {
    arr = []
  }
  return arr
})

function handleConfirm({ value }) {
  // if (Array.isArray(value)) {
  //   if (value[0]) {
  //     formatDate.value[0] = dayjs(value[0]).format('YYYY-MM-DD')
  //   }
  //   if (value[1]) {
  //     formatDate.value[1] = dayjs(value[1]).format('YYYY-MM-DD')
  //   }
  // } else {
  //   formatDate.value = []
  // }

  console.log(formatDate.value)
  emits('confirm')
}
</script>

<style lang="scss" scoped>
$active-color: #8597ff;

.date {
  &-wrap {
    display: flex;
    align-items: center;
    width: 210px;
    height: 40px;
    font-size: $uni-font-size-base;
    color: $active-color;
    background: $uni-bg-color;
    border-radius: $uni-border-radius-lg;
  }

  &-range {
    display: flex;
    flex: 1;

    &-item {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: center;
    }
  }

  &-icon {
    padding: 0 $uni-spacing-row-sm;

    image {
      width: 20px;
      height: 20px;
    }
  }
}
</style>
